<template>
    <div class="common-layout" style="background-color:rgb(228,234,240);">
        <el-container>
            <el-aside width="250px" style="background-color:rgb(255, 255, 255);">
                <!-- 这里要填签约信息下的 -->
                <el-table :data="tableData" border style="width: 100%;background-color:rgb(255, 255, 255);"
                    @row-click="handleRowClick">
                    <el-table-column prop="residentFiles_Name" label="姓名" width="75" />
                    <el-table-column prop="sex" label="性别" width="55">
                        <template v-slot="scope">
                            {{ scope.row.sex == true ? "男" : "女" }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="age" label="年龄" width="70" />
                </el-table>
            </el-aside>
            <el-container>
                <el-header style="background-color:rgb(255, 255, 255);margin-left: 10px;">
                    <b>{{ store.ccstore.nickName }}</b> &nbsp; 男|29岁
                    <el-tag type="primary">高血压</el-tag>
                    <el-tag type="warning">2型糖尿病</el-tag><br />
                    医保类型:职工医疗 &nbsp;联系电话:15509097890 &nbsp; &nbsp;
                </el-header>
                <el-main style="background-color:rgb(255, 255, 255);margin-left: 10px;margin-top: 10px;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <span style="color: rgb(6, 55, 124);">体征检查</span>
                        <hr style="border-color: rgb(6, 55, 124);">
                        <div>
                            <el-form-item label="身高:">
                                <el-input style="width: 150px;" v-model="formInline.height" @change="getbmi" />cm
                            </el-form-item>
                            <el-form-item label="体重:">
                                <el-input style="width: 150px;" v-model="formInline.weight" @change="getbmi" />kg
                            </el-form-item>
                            <el-form-item label="BMI:">
                                <el-input disabled style="width: 150px;" v-model="formInline.bim" />kg/m2
                            </el-form-item>
                        </div>
                        <span>血压测量(收缩压/舒张压)</span>
                        <el-button size="large" @click="addBloodPressureTest" :disabled="hasAdded">+</el-button>
                        <div v-for="(test, index) in formInline.bloodPressureTest" :key="index">
                            <div>
                                <br />
                                <el-form-item label="部位">
                                    <el-select placeholder="请选择部位" clearable style="width: 200px;" v-model="test.part">
                                        <el-option label="左手" value="左手" />
                                        <el-option label="右手" value="右手" />
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="第一次收缩压测量:">
                                    <el-input style="width: 200px;" v-model="test.oneSystolicPressure"
                                        @change="calculateBloodPressureAverages(index)" />mmHg
                                </el-form-item>
                                <el-form-item label="第一次舒张压测量:">
                                    <el-input style="width: 200px;" v-model="test.oneDiastolicPressure"
                                        @change="calculateBloodPressureAverages(index)" />mmHg
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="第二次收缩压测量:">
                                    <el-input style="width: 200px;" v-model="test.twoSystolicPressure"
                                        @change="calculateBloodPressureAverages(index)" />mmHg
                                </el-form-item>
                                <el-form-item label="第二次舒张压测量:">
                                    <el-input style="width: 200px;" v-model="test.twoDiastolicPressure"
                                        @change="calculateBloodPressureAverages(index)" />mmHg
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="第三次收缩压测量:">
                                    <el-input style="width: 200px;" v-model="test.threeSystolicPressure"
                                        @change="calculateBloodPressureAverages(index)" />mmHg
                                </el-form-item>
                                <el-form-item label="第三次舒张压测量:">
                                    <el-input style="width: 200px;" v-model="test.threeDiastolicPressure"
                                        @change="calculateBloodPressureAverages(index)" />mmHg
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="平均收缩压测量:">
                                    <el-input style="width: 215px;" v-model="test.aveSystolicPressure" disabled />mmHg
                                </el-form-item>
                                <el-form-item label="平均舒张压测量:">
                                    <el-input style="width: 215px;" v-model="test.aveDiastolicPressure" disabled />mmHg
                                </el-form-item>
                                <!-- 只有新增的模块才显示删除按钮 -->
                                <el-button v-if="index > 0" type="danger"
                                    @click="removeBloodPressureTest(index)">删除</el-button>
                            </div>
                        </div>
                        <span style="color: rgb(6, 55, 124);">辅检项目</span>
                        <hr style="border-color: rgb(6, 55, 124);">
                        <span>血糖监测</span>
                        <div>
                            <br />
                            <el-form-item label="空腹血糖:">
                                <el-input style="width: 215px;" v-model="formInline.fastingBloodGlucose" />mmol/L
                            </el-form-item>
                            <el-form-item label="餐后2小时血糖:">
                                <el-input style="width: 215px;" v-model="formInline.postprandialBloodGlucose" />mmol/L
                            </el-form-item>
                        </div>
                        <span>血脂检测</span>
                        <div>
                            <br />
                            <el-form-item label="总胆固醇(TC):">
                                <el-input style="width: 215px;" v-model="formInline.cholesterol" />mmol/L
                            </el-form-item>
                            <el-form-item label="甘油三酯(TG):">
                                <el-input style="width: 215px;" v-model="formInline.triglyceride" />mmol/L
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="高密度脂蛋白胆固醇(HDL-C):">
                                <el-input style="width: 215px;" v-model="formInline.hdlCholesterol" />mmol/L
                            </el-form-item>
                            <el-form-item label="低密度脂蛋白胆固醇(LDL-C):">
                                <el-input style="width: 215px;" v-model="formInline.ldlCholesterol" />mmol/L
                            </el-form-item>
                        </div>
                        <div>
                            <el-button type="info" style="margin-left: 600px;" @click="getshow"
                                v-if="shower == true">开始采集</el-button>
                            <el-button type="info" style="margin-left: 600px;" @click="getshow"
                                v-else="shower==false">完成采集</el-button>
                            <el-button type="primary" @click="addcoll" :disabled="shower == false">保存结果</el-button>
                        </div>
                    </el-form>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue'
import { useCounterStore } from '@/stores/counter';
import { compileStyle } from 'vue/compiler-sfc';
import type { RefSymbol } from '@vue/reactivity';
const store = useCounterStore();
const apiUrl = import.meta.env.VITE_APP_API_URL;
//定义按钮显示变量
const shower = ref(true)
// 获取签约信息
const tableData = ref([]);
const getTableDataList = () => {
    axios.get(apiUrl + '/T7/Sign/GetPatientByDoctor', {
        params: {
            Doctor: store.ccstore.nickName
        }
    }).then(res => {
        tableData.value = res.data.data;
    });
};

const formInline = reactive({
    collCode: "512001",
    collName: store.ccstore.userName,
    sex: "男",
    identityCard: "5130******0898",
    height: null,
    weight: null,
    bim: 0.0,
    fastingBloodGlucose: null,
    postprandialBloodGlucose: null,
    cholesterol: null,
    triglyceride: null,
    hdlCholesterol: null,
    ldlCholesterol: null,
    userId: store.ccstore.userId,
    createTime: "2025-04-25T07:14:30.956Z",
    isDeleted: true,
    bloodPressureTest: [
        {
            bId: 0,
            userId: store.ccstore.userId,
            userName: store.ccstore.userName,
            part: "",
            oneSystolicPressure: null,
            oneDiastolicPressure: null,
            twoSystolicPressure: null,
            twoDiastolicPressure: null,
            threeSystolicPressure: null,
            threeDiastolicPressure: null,
            aveSystolicPressure: 0.00,
            aveDiastolicPressure: 0.00,
            createTime: "2025-04-25T07:14:30.956Z",
            isDeleted: false
        }
    ],
});
// 标记是否已经添加过新的血压测量模块
const hasAdded = ref(false);
// 添加新的血压测量模块
const addBloodPressureTest = () => {
    if (!hasAdded.value) {
        formInline.bloodPressureTest.push({
            bId: 0,
            userId: formInline.userId,
            userName: formInline.collName,
            part: "",
            oneSystolicPressure: null,
            oneDiastolicPressure: null,
            twoSystolicPressure: null,
            twoDiastolicPressure: null,
            threeSystolicPressure: null,
            threeDiastolicPressure: null,
            aveSystolicPressure: 0.00,
            aveDiastolicPressure: 0.00,
            createTime: "2025-04-25T07:14:30.956Z",
            isDeleted: false
        });
        hasAdded.value = true;
    }
};
// 删除指定索引的血压测量模块
const removeBloodPressureTest = (index: number) => {
    formInline.bloodPressureTest.splice(index, 1);
    hasAdded.value = false;
};
const addcoll = () => {
    axios.post(apiUrl + '/T8/BasicSettings/AddColl', formInline)
        .then(res => {
            if (res.data.code === 212) {
                ElMessage.success(res.data.msg);
                // 清空文本框
                formInline.height = null;
                formInline.weight = null;
                formInline.bim = 0.0;
                formInline.fastingBloodGlucose = null;
                formInline.postprandialBloodGlucose = null;
                formInline.cholesterol = null;
                formInline.triglyceride = null;
                formInline.hdlCholesterol = null;
                formInline.ldlCholesterol = null;
                formInline.bloodPressureTest = [
                    {
                        bId: 0,
                        userId: store.ccstore.userId,
                        userName: store.ccstore.userName,
                        part: "",
                        oneSystolicPressure: null,
                        oneDiastolicPressure: null,
                        twoSystolicPressure: null,
                        twoDiastolicPressure: null,
                        threeSystolicPressure: null,
                        threeDiastolicPressure: null,
                        aveSystolicPressure: 0.00,
                        aveDiastolicPressure: 0.00,
                        createTime: "2025-04-25T07:14:30.956Z",
                        isDeleted: false
                    }
                ];
                hasAdded.value = false;
            } else {
                ElMessage.error(res.data.msg);
            }
        })
}
const getshow = () => {
    if (shower.value == true) {
        shower.value = false
    }
    else {
        shower.value = true
    }
}
//计算BMI
const getbmi = () => {
    if (formInline.height != null && formInline.weight != null) {
        formInline.bim = (formInline.weight / ((formInline.height * 0.01) * (formInline.height * 0.01))).toFixed(2)
    }
}
// 计算平均血压
const calculateBloodPressureAverages = (index: number) => {
    const test = formInline.bloodPressureTest[index];
    const systolicPressures = [test.oneSystolicPressure, test.twoSystolicPressure, test.threeSystolicPressure].filter(Boolean);
    const diastolicPressures = [test.oneDiastolicPressure, test.twoDiastolicPressure, test.threeDiastolicPressure].filter(Boolean);
    if (systolicPressures.length > 0) {
        const sumSystolic = systolicPressures.reduce((acc, val) => acc + Number(val), 0);
        test.aveSystolicPressure = (sumSystolic / systolicPressures.length).toFixed(2);
    } else {
        test.aveSystolicPressure = null;
    }
    if (diastolicPressures.length > 0) {
        const sumDiastolic = diastolicPressures.reduce((acc, val) => acc + Number(val), 0);
        test.aveDiastolicPressure = (sumDiastolic / diastolicPressures.length).toFixed(2);
    } else {
        test.aveDiastolicPressure = null;
    }
};

const handleRowClick = (row: any) => {
    formInline.collName = row.residentFiles_Name;
    formInline.sex = row.sex == true ? "男" : "女";
    formInline.userId = row.patient_Id;

};

onMounted(() => {
    getTableDataList();
})
</script>